﻿<template>
	<div style="padding:0px;">
		<el-form :model="dialogForm" :rules="rules" ref="dialogForm" :label-width="formLabelWidth">
		<el-card class="box-card">		  
		  <div  class="text item">			
			  	<div slot="header" class="clearfix">
		          <span style="line-height: 30px;">订单信息</span>
		        </div>
			    <el-form-item label="订单号"  >
			        <el-input v-model="dialogForm.orderNumber" auto-complete="off" disabled ></el-input>
			    </el-form-item>	
			    <el-form-item label="汽车车型"   >
			        <el-input  v-model="dialogForm.specificationName" auto-complete="off" disabled ></el-input>
			    </el-form-item>
			    <el-form-item label="汽车数量"  prop="amount">
			        <el-input  type="tel" :maxlength="9" v-model.number="dialogForm.amount" auto-complete="off" disabled ></el-input>
			    </el-form-item>
			    <el-form-item label="购车总价格"  class="currency">
			      <el-input :value="dialogForm.totalPrice| toFixed2" auto-complete="off" disabled></el-input>
			      <span class="convertCurrency">{{dialogForm.totalPrice|convertCurrency}}</span>
			    </el-form-item>
			    <el-form-item label="定金金额"  class="currency">
			      <el-input :value="dialogForm.earnest| toFixed2" auto-complete="off" disabled></el-input>
			      <span class="convertCurrency">{{dialogForm.earnest|convertCurrency}}</span>
			    </el-form-item>
			    <el-form-item label="垫资金额"  class="currency">
			      <el-input :value="dialogForm.paymentAmount| toFixed2" auto-complete="off" disabled></el-input>
			      <span class="convertCurrency">{{dialogForm.paymentAmount|convertCurrency}}</span>
			    </el-form-item>
			    <el-form-item label="保证金状态" >
			      <el-input v-model="statusMap[dialogForm.status]" auto-complete="off" disabled></el-input>
			    </el-form-item>
			    <el-form-item label="保证金金额"  class="currency">
			      <el-input :value="dialogForm.deposit| toFixed2" auto-complete="off" disabled></el-input>
			      <span class="convertCurrency">{{dialogForm.deposit|convertCurrency}}</span>
			    </el-form-item>
			    <el-form-item label="保证金确认备注" >
			      <el-input type="textarea" :rows=3 v-model="dialogForm.bondRemark" auto-complete="off" disabled></el-input>
			    </el-form-item>	
			</div>
		</el-card>
	    <el-card class="box-card" style="margin-top:15px;">		  
		  <div  class="text item">			
			  	<div slot="header" class="clearfix">
		          <span style="line-height: 30px;">保证金信息</span>
		        </div>
			     <el-form-item label="保证金凭证照片" >
			      <qiniu  :qiniuImage="qiniuImage"  :packJson="packJson" :id="qiniuImage.id" :canDelete="dialogSendData.isAdd"></qiniu>
			    </el-form-item>
			    <el-form-item label="备注信息" >
			      <el-input type="textarea" :rows=3 v-model="dialogForm.remark" auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
			    </el-form-item>			    		   
			</div>
		</el-card>
		<div style="text-align:right;margin-top:15px;">
			 <el-button @click="returnBack">返 回</el-button>
			 <el-button v-if="dialogSendData.isAdd" type="primary" @click="submitConfirmForm('dialogForm')">提 交</el-button>
		</div>
		</el-form>
	</div>
</template>
<script>
    import agentHttp from '@/utils/agentHttp.js'
    import qiniu from '@/views/qiniu/upload'
    import {convertCurrency} from '@/utils/convertCurrency.js'

	export default{
		created(){
            this.selectData(); 
        },
		props:['dialogSendData','tableData'],
		components:{qiniu},
		data(){			
			return{
				formLabelWidth:'170px',
				//弹窗或者查看页面信息
		        dialogForm:{
		        },
		        rules: {
		          isPass:[{ required: true, message: 'isPass', trigger: 'blur' }],
		          reviewRemark:[{ required: true, message: '审核备注不能为空', trigger: 'blur' }]
		        },
		        //七牛图片上传
		        qiniuImage:{
		        	id:"qiniuImage", //图片预览的id   
		        	image_uri:[]    //图片上传的列表  只含有url地址
		        },
		        
		        packJson:{
					maxLength:12,   //最大图片数量
					accept:"",//image/gif,image/jpeg,image/jpg,image/png如果是这些，可以不传此参数
					size:4    //图片大小  单位兆
				},
				
      			statusMap:''
			}
		},methods:{
			returnBack(){
				this.dialogSendData.dialogFormVisible=false;
			},
			submitConfirmForm(formName){
                this.$refs[formName].validate((valid) => {
		          if (valid) {		          	
		            this.editData();
		          } else {
		            this.$nextTick(()=>{
		          		this.$message.warning(document.getElementsByClassName('el-form-item__error')[0].innerText||"提交失败");
		                return false;
		          	})
		          }
		        });
			},		    
		    editData(){
		    	if(this.qiniuImage.image_uri.length<=0){
                    this.$message.warning('保证金凭证图片至少一张');
		    		return
		    	}
		    	this.dialogForm.voucherPic=this.qiniuImage.image_uri.join(",")==''?null:this.qiniuImage.image_uri.join(",");
		    	
		    	this.dialogForm.carOrderId = this.dialogSendData.carOrderId;
		        agentHttp.putJson('adminApi/admin/cash_deposit_info/update',this.dialogForm).then((data)=>{
		            if(data.success){
		            	setTimeout(()=>{
		            		this.dialogSendData.dialogFormVisible=false;
		            	},500);  
		            	this.$emit('refreshTableData', null);
		            	this.$message.success(data.data||"编辑成功");			          	
		            } 
		        }) 
		    },
		    selectData(){
		        agentHttp.get('adminApi/admin/cash_deposit_info/view/'+this.dialogSendData.carOrderId).then((data)=>{	
		            if(data.success){  
		            	this.dialogForm = data.data.dialogForm;
		            	this.statusMap = data.data.statusMap;
		            	this.qiniuImage.image_uri = data.data.dialogForm.voucherPic.split(',').notempty()//去掉为空的项，不然导致图片张数控制不准
		            	
		            } 
		        }) 
		    }
		}
	};
	
</script>